<template>
    <el-row :gutter="32">
        <el-row style="width: 100%;padding-left: 0 !important; display: flex;flex-direction: row; justify-content: space-between;">
            <el-col :span="24">
                <el-breadcrumb style="margin-bottom: 10px;" separator="/">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">管理员管理</a></el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :span="24">
                <el-button type="success" icon="el-icon-refresh" @click="reloadmsg" size="mini">刷新</el-button>
                <el-button type="warning" icon="el-icon-plus" @click="addmsg" size="mini">添加</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                <el-button type="primary" icon="el-icon-upload" size="mini">导入</el-button>
            </el-col>
        </el-row>

        <el-table ref="multipleTable" :data="tableData"  default-expand-all tooltip-effect="dark" style="width: 100%;margin-top: 15px;"
            :row-style="{height:'50px'}" :cell-style="{padding:'2px 0'}" :header-cell-style="{background:'#f4f4f5'}"
            row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @selection-change="handleSelectionChange">
            <el-table-column prop="id" width="150" label="ID">
                <template #default="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center">
                <template #default="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column prop="account" label="账号" align="center">
                <template #default="scope">{{ scope.row.account }}</template>
            </el-table-column>
            <el-table-column prop="company_id" label="公司" align="center">
                <template #default="scope">{{ scope.row.cName}}</template>
            </el-table-column>
            <el-table-column prop="department_id" label="部门" align="center">
                <template #default="scope">{{ scope.row.dName}}</template>
            </el-table-column>
            <el-table-column prop="group_id" label="权限组" align="center">
                <template #default="scope">{{ scope.row.gName}}</template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template #default="scope">
                    <el-button size="mini" v-if="scope.row.logingId==1||scope.row.companyId == scope.row.loginCId" @click="update(scope.$index, scope.row)" type="text"
                        style="color: #606266;" icon="el-icon-edit"></el-button>
                    <el-button size="mini" v-if="scope.row.logingId==1||scope.row.companyId == scope.row.loginCId" @click="handleDelete(scope.$index, scope.row)" type="text"
                        style="color: #f55c6c;margin-left: 10px;" icon="el-icon-delete"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-col>
            <el-pagination background layout="sizes,prev, pager, next,total,jumper" :page-size="pagesize" :total="total"
                style="padding-top: 1.25rem;float: right;" @size-change="handlesizechange" @current-change="handlepagechange"
                :prev-text="上一页" :next-text="下一页" :current-page="currentPage">
            </el-pagination>
        </el-col>
    </el-row>
    <el-dialog :title="doupdate?'新增':'修改' " v-model="dialogFormVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="account">
                <el-input v-model="ruleForm.account"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-if="!doupdate" v-model="ruleForm.password" placeholder="留空则视为不修改密码"></el-input>
                <el-input v-if="doupdate" v-model="ruleForm.password" placeholder="密码不能为空"></el-input>
            </el-form-item>
            <el-form-item v-if="ruleForm.id!=1" label="公司"  prop="company_id">
                <el-select  v-model="ruleForm.cName" @change="companyChang"  placeholder="选择公司">
                    <template v-for="(value,index) in ruleForm.cList" v-bind:key="index">
                        <el-option :label="value.name" :value="value.id"></el-option>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item v-if="ruleForm.id!=1" label="部门" prop="department_id">
                <el-select v-model="ruleForm.dName" placeholder="选择部门">
                    <template v-for="(value,index) in ruleForm.dList" v-bind:key="index">
                        <el-option :label="value.name" :value="value.id"></el-option>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item v-if="ruleForm.id!=1" label="角色组" prop="group_id">
               <el-select v-model="ruleForm.gName"   placeholder="选择角色组">
                   <template v-for="(value,index) in ruleForm.gList" v-bind:key="index">
                       <el-option :label="value.name" :value="value.id"></el-option>
                   </template>
               </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitform('ruleForm')">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
    const axios = require('axios');
    export default {
        data() {
            console.log("xixi")
            var height = document.documentElement.clientHeight
            return {
                height: height - 222,
                currentPage: 1,
                pagesize: 10,
                total: 10,
                tableData: [],
                selectTabItem: [],
                multipleSelection: [],
                dialogFormVisible: false,
                showchooseicon: false,
                parentlist: [],
                selecticon: "",
                doupdate:false,
                ruleForm: {
                    id: '',
                    name:"",
                    account:"",
                    password:"",
                    dList:[],
                    cList:[],
                    gList:[],
                    dName:"",
                    cName:"",
                    gName:"",
                    department_id:"",
                    company_id:"",
                    group_id:"",
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    }
                },
                rules: {
                    name: [{
                            required: true,
                            message: '角色名称不能为空',
                            trigger: 'blur'
                        }
                    ],
                    account: [{
                        required: true,
                        message: '账号不能为空',
                        trigger: 'blur'
                    }],
                    department: [{
                        required: true,
                        message: '所属部门不能为空',
                        trigger: 'blur'
                    }],
                    company: [{
                        required: true,
                        message: '所属公司不能为空',
                        trigger: 'blur'
                    }]
                }
            }
        },

        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val;
            },
            handlepagechange(val) {
                console.log(val)
                this.$data.currentPage = val
                this.getMsg()
            },
            handlesizechange(val) {
                console.log(val)
                this.$data.pagesize = val
                this.getMsg()
            },companyChang(){
                console.log();
                var that = this;
                var url = "http://localhost:8081/user/getdepartment?companyId=" + this.$data.ruleForm.cName
                axios
                    .get(url)
                    .then(
                        function(res) {
                            console.log(res.data)
                            if (res.data.resultmsg.code == 200) {
                                that.$data.ruleForm.dList = res.data.resultmsg.data
                                that.$data.ruleForm.dName = ""
                            }else if (res.data.resultmsg.code == 400001) {
                                that.$message.error({
                                    message: res.data.resultmsg.msg,
                                    type: 'error',
                                    duration: 2000,
                                    center: true
                                }) 
                            }  else if (res.data.resultmsg.code == 400002) {
                                that.$message.error({
                                    message: res.data.resultmsg.msg,
                                    type: 'error',
                                    duration: 1000,
                                    center: true
                                });
                                setTimeout(function() {
                                    that.$router.push("login")
                                }, )
                            }
                        }
                    )
                    .catch(function(error) { // 请求失败处理
                        console.log(error);
                        that.$message.error({
                            message:"网络请求失败",
                            type: 'error',
                            duration: 1000,
                            center: true
                        });
                    });
            }
            ,
            getMsg() {
                var that = this;
                var url = "http://localhost:8081/user/page?limit=" + that.$data.pagesize + "&page=" + (that.$data
                    .currentPage - 1)
                axios
                    .get(url)
                    .then(
                        function(res) {
                            console.log(res.data)
                            if (res.data.resultmsg.code == 200) {
                                that.$data.tableData = res.data.resultmsg.data
                                that.$data.total = res.data.resultmsg.data[0].total
                            }else if (res.data.resultmsg.code == 400001) {
                                that.$message.error({
                                    message: res.data.resultmsg.msg,
                                    type: 'error',
                                    duration: 2000,
                                    center: true
                                }) 
                            }  else if (res.data.resultmsg.code == 400002) {
                                that.$message.error({
                                    message: res.data.resultmsg.msg,
                                    type: 'error',
                                    duration: 1000,
                                    center: true
                                });
                                setTimeout(function() {
                                    that.$router.push("login")
                                }, )
                            }
                        }
                    )
                    .catch(function(error) { // 请求失败处理
                        console.log(error);
                    });
            },
            update(index, row) {
                this.$data.doupdate = false
                console.log(index)
                console.log(row)
                this.$data.dialogFormVisible = true
                this.$data.ruleForm.name = row.name
                this.$data.ruleForm.id = row.id
                this.$data.ruleForm.account = row.account
                this.$data.ruleForm.dList = row.dList
                this.$data.ruleForm.cList = row.cList 
                this.$data.ruleForm.gList = row.gList
                this.$data.ruleForm.department_id = parseInt(row.departmentId) 
                this.$data.ruleForm.company_id = parseInt(row.companyId)
                this.$data.ruleForm.group_id = parseInt(row.groupId)
                this.$data.ruleForm.gName = parseInt(row.groupId)
                this.$data.ruleForm.cName = parseInt(row.companyId)
                this.$data.ruleForm.dName = parseInt(row.departmentId) 
            },
            submitform(ruleForm) {
                console.log(this.$data.ruleForm)
                var that = this;
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '拼命加载中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });

                        var url = "http://localhost:8081/user/updatebyid?param=" + encodeURIComponent(
                            encodeURIComponent(JSON.stringify(this.$data.ruleForm)))
                        axios
                            .get(url)
                            .then(
                                function(res) {
                                    console.log(res.data)
                                    if (res.data.resultmsg.code == 200) {
                                        that.$message({
                                            type: 'success',
                                            message: res.data.resultmsg.msg,
                                            center: true
                                        });
                                        that.$data.dialogFormVisible = false
                                        that.getMsg()
                                    } else if (res.data.resultmsg.code == 400002) {
                                        that.$message.error({
                                            message: res.data.resultmsg.msg,
                                            type: 'error',
                                            duration: 1000,
                                            center: true
                                        });
                                        that.$router.push({
                                           name: 'Login'
                                       })
                                    } else if (res.data.resultmsg.code == 400001) {
                                        that.$message.error({
                                            message: res.data.resultmsg.msg,
                                            type: 'error',
                                            duration: 2000,
                                            center: true
                                        });
                                    }

                                }
                            )
                            .catch(function(error) { // 请求失败处理
                                console.log(error)
                                that.$message({
                                    type: 'error',
                                    message: '網絡請求失敗!',
                                    center: true
                                });
                            });
                        loading.close()
                    }
                })
            },
            handleDelete(index, row) {
                var that = this;
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var url = "http://localhost:8081/user/deletebyid?id=" + row.id
                    axios
                        .get(url)
                        .then(
                            function(res) {
                                console.log(res.data)
                                if (res.data.resultmsg.code == 200) {
                                    that.$message({
                                        type: 'success',
                                        message: '删除成功!',
                                        center: true
                                    });
                                    that.getMsg()
                                } else if (res.data.resultmsg.code == 400002) {
                                    that.$message.error({
                                        message: res.data.resultmsg.msg,
                                        type: 'error',
                                        duration: 2000,
                                        center: true
                                    });
                                    that.$router.push({
                                        name: 'Login'
                                    })
                                }else if (res.data.resultmsg.code == 400001) {
                                    that.$message.error({
                                        message: res.data.resultmsg.msg,
                                        type: 'error',
                                        duration: 2000,
                                        center: true
                                    });
                                }
                            }
                        )
                        .catch(function() { // 请求失败处理
                            that.$message({
                                type: 'error',
                                message: '網絡請求失敗!',
                                center: true
                            });
                        });

                }).catch(() => {

                });
                console.log(row)
            },
            reloadmsg() {
                this.getMsg()
            },
            addmsg() {
                this.$data.doupdate = true
                this.$data.dialogFormVisible = true
                this.$data.ruleForm.name = ""
                this.$data.ruleForm.id = ""
                this.$data.ruleForm.account = ""
                this.$data.ruleForm.dList =this.$data.tableData[0].dList
                this.$data.ruleForm.cList = this.$data.tableData[0].cList
                this.$data.ruleForm.gList = this.$data.tableData[0].gList
                this.$data.ruleForm.department_id = ""
                this.$data.ruleForm.company_id = ""
                this.$data.ruleForm.group_id =""
                this.$data.ruleForm.gName = ""
                this.$data.ruleForm.cName = ""
                this.$data.ruleForm.dName = ""
                
            },checkSe(data){
                var select = this.$data.ruleForm.checked
                console.log(data.children.length)
                if(data.children.length>0){
                    for(var i = 0;i < data.children.length;i++){
                        if(select.indexOf(data.children[i].id)==-1){
                            select.push(data.children[i].id)
                        }else{
                            select.splice(select.indexOf(data.children[i].id),1)
                        }
                    }
                }
                if(select.indexOf(data.id)==-1){
                    select.push(data.id)
                }else{
                    select.splice(select.indexOf(data.id),1)
                }
                
                this.$data.ruleForm.checked = select
            }
        },
        mounted: function() {
            console.log("haha")
            this.getMsg()
        }
    }
</script>

<style>
    .el-row {
        padding: 0;
    }

    i {
        font-weight: 700 !important;
    }

    .icon-list li {
        list-style: none;
        float: left;
        width: 38px;
        line-height: 32px;
    }

    .el-dialog__body {
        padding: 30px 20px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
        overflow: scroll;
        height: 300px;
    }

    .icon-list li i {
        display: block;
        float: left;
        font-size: 32px;
        margin-bottom: 15px;
        color: #606266;
        transition: color .15s linear;
    }

    .el-dialog {
        min-width: 800px !important;
    }
</style>
